<template>
    <ManageStudentView>
        <div class="card">
            <div class="card-body">
                <div class="card-list-scrollable" style="max-height: 565px;">
                    <div class="card card-single" v-for="user in user_list" :key="user.id" @click="to_contart(user.user_id)">
                        <div class="card-body card-body-info">
                            <span @click.stop="">学号：{{ user.studentid}}</span>
                            <span>书籍名称：{{ user.bookname }}</span>
                            <span>作者：{{ user.bookauthor }}</span>
                            <span>借书时间：{{ user.borrowedtime }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ManageStudentView>
</template>

<script>
import ManageStudentView from '@/components/ManageStudentView.vue';
import $ from 'jquery';
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
    name: "UserBorrowedBookView",
    components: {
        ManageStudentView
    },
    setup() {
        const user_list = ref([]);
        const store = useStore();
        const router = useRouter();

        $.ajax({
            url: "http://47.121.28.202:8000/settings/userborrowed/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            success(resp) {
                user_list.value  =resp;
            }
        })

        const to_contart = (userid) => {
            if (store.state.user.is_login) {
                router.push({
                    name: 'ordinarydialogue',
                    params: {
                        userid
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        return {
            user_list,
            to_contart
        }
    }
}
</script>

<style scoped>
.card-body-info > span {
    margin-right: 20px;
}
.card-single {
    margin-bottom: 10px;
}
.card-list-scrollable {
    overflow-y: auto;
    border-radius: 5px;
}
</style>